<template>
  <div>
    <div style="background: #fff">
      <div id="yuannei" ref="print" style="background: #fff">
        <el-form ref="addform" :model="addform" :rules="rules" class="demo-addform" label-position="top">
          <el-row>
            <el-col class="form_item_col" :span="24">
              <el-form-item label="app名称" prop="appName" style="margin-bottom: 0">
                <el-input :disabled="isView" v-model="addform.appName" placeholder="请填写app名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col class="form_item_col" :span="24">
              <el-form-item label="当前版本号" prop="version" style="margin-bottom: 0">
                <el-input :disabled="isView" v-model="addform.version" placeholder="请填写当前版本号"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-col class="form_item_col" :span="7">
            <el-form-item label="APP包上传" prop="downloadUrl" style="margin-bottom: 0">
              <uploadFiles :disabled="isView" title="点击上传" @onImagesChange="handleGetUploadFiles($event, 'downloadUrl')" ref="upload" :source="addform.downloadUrl"></uploadFiles>
            </el-form-item>
          </el-col>
          <!-- <el-row>
            <el-col class="form_item_col" :span="24">
              <el-form-item label="下载地址" prop="downloadUrl" style="margin-bottom: 0">
                <el-input rows="2" type="textarea" :disabled="isView" v-model="addform.downloadUrl" placeholder="请填写下载地址"></el-input>
              </el-form-item>
            </el-col>
          </el-row> -->
          <el-row>
            <el-col class="form_item_col" :span="24">
              <el-form-item label="备注" prop="remark" style="margin-bottom: 0">
                <el-input rows="2" type="textarea" :disabled="isView" v-model="addform.remark" placeholder="请填写备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row class="btn_groups" type="flex" justify="center" v-if="!isView">
          <el-button type="primary" @click="submitApply('addform', 2)">确定</el-button>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import uploadFiles from './uploadFiles.vue';
import { saveAppVersion } from '../../../api/index';
const createData = () => ({
  appName: '', //app名称
  downloadUrl: '', //下载地址
  id: '', //主键id
  remark: '', //备注
  version: '' //当前版本号
});
export default {
  components: { uploadFiles },
  props: {
    query: {
      default: () => ({})
    }
  },
  data() {
    return {
      addform: createData(),
      approveform: {},
      levelType: [],
      type: 'add',
      isView: false,
      isEdit: false,
      rules: {
        appName: [{ required: true, message: '必填项', trigger: 'blur' }],
        version: [{ required: true, message: '必填项', trigger: 'blur' }]
      }
    };
  },
  created() {
    if (this.query.type == 'view') {
      this.isView = true;
    } else {
      this.isView = false;
    }
    switch (this.query.type) {
      case 'add': {
        break;
      }
      case 'edit': {
        this.fetch(this.query);
        break;
      }
      case 'view': {
        this.fetch(this.query);
        break;
      }
      case 'shenpi': {
        this.fetch(this.query);
        break;
      }
    }
  },
  methods: {
    // 上传列表
    handleGetUploadFiles(url, type) {
      if (type == 'downloadUrl') {
        this.addform.downloadUrl = `${url}`;
        // this.addform.downloadUrl = `${url}`;
      }
    },
    fetch(row) {
      this.addform = row;
    },
    handerClose() {
      this.$emit('close');
    },
    submitApply(formName, val) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          saveAppVersion(this.addform).then((e) => {
            this.$emit('close');
            this.$message.success('操作成功');
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-input-number .el-input__inner {
  text-align: left;
}

.dialog_filter_row {
  display: flex;
  justify-content: space-between;
}

.dialog_filter_row .el-form-item {
  display: flex;
  flex-direction: column;
  width: 188px;
}

.dialog_filter_row .el-select,
.dialog_filter_row .el-date-editor,
.dialog_filter_row .el-input-group {
  width: unset !important;
}

.form_item_col {
  width: 188px;
}
::v-deep .el-form-item__label {
  margin: 20px 0 10px;
  height: 14px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #00041a;
  line-height: 14px;
  text-indent: 14px;

  &:before {
    color: #ff4d4f;
    font-size: 14px;
  }
}

.btn_groups {
  margin: 40px 0 0;
  display: flex;
  justify-content: flex-end;
  .el-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 87px;
    height: 32px;
    background: #3f8cff;
    border-radius: 2px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
  }
}

.date_picker {
  width: 188px;
}

/deep/.btn_groups .search-btn {
  background-color: #fff;
  border: 1px solid #3f8cff;
  color: #3f8cff;
}
/deep/.el-textarea.is-disabled .el-textarea__inner {
  cursor: default;
}

/deep/.el-input.is-disabled .el-input__inner {
  cursor: default;
}
</style>